<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    td{width: 50px;}
    th{background-color: beige;}
    table{padding: 0 20px;float: left;}
  </style>
</head>
<body>
  <script>
    window.onload = function(){
      var date = new Date();
      var year = date.getFullYear();
      // document.write(calendar(year));
      document.getElementsByTagName("body")[0].innerHTML 
        = calendar(year);
    }
    // alert(year); 
    function calendar(year) {
      var  html = "";
      var w = new Date(year,0).getDay();
      console.log(w);
      for(let m=1;m<=12;m++){ 
        
        html += '<table><tr><th colspan="7">'+year 
          +'年'+m+'月</th></tr><tr><td>日</td><td>一</td> <td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'
        var monthMax = new Date(year,m,0).getDate();
        console.log(monthMax);
        html+= "<tr>";
        for(let d=1;d<=monthMax;d++){
          
          if(w && d==1){
            html += '<td colspan="'+w+'"></td>'
          }
          html += '<td>'+d+'</td>';
          if(w==6 && d !=monthMax){
            html += '</tr><tr>';
          }else if(d == monthMax){
            html += '</tr>';
          }
          w = (w+1>6)?0:w+1;
        }

        html+="</tr></table>"
      }
      return html;
    }
  </script>
  
  
</body>
</html>